.content {
  max-width: 45rem;

  @media only screen and (max-width: 500px) {
    padding: 0 0.5rem;
  }
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    'email email'
    'emailVerified emailVerified'
    'username username'
    'givenName familyName'
    'authenticationFactor authenticationFactor';
  column-gap: 1rem;
}

.email {
  grid-area: email;
}

.emailVerified {
  grid-area: emailVerified;
}

.givenName {
  grid-area: givenName;
}

.familyName {
  grid-area: familyName;
}

.username {
  grid-area: username;
}

.authenticationFactor {
  grid-area: authenticationFactor;
  margin-bottom: 1rem;
}

.authenticationFactorRadioGroup > mat-radio-button {
  display: block;
}

.authenticationFactorButton {
  margin-top: 1rem;
}

.stretchInput {
  max-width: unset;
}
